<template>
  <div class='message'>
    <Tabs :tabsData="tabsData" :btnsData="btnsData" />
    <Table :data="data" @flash="getListData" />
    <el-pagination class="pagination" background layout="total,prev, pager, next,jumper" :page-size="pageInfo.pageSize||10" :current-page="pageInfo.page" :total="pageInfo.total" @current-change="pageChange"></el-pagination>
  </div>  
</template>
<script>
import Tabs from "./model/tabs"
import Table from "./model/table"
export default {
  components: {Table,Tabs},
  name: "",
  data() {
    return {
      tabsData:[
        {label:"未读消息",isActive:true,click:this.getListData},
        {label:"已读消息",isActive:false,click:this.getListData},
      ],
      btnsData:[
        {type:"btn",class:{'color-blue':true,fr:true},label:"标记为已读",click:this.readAll},
        {type:"btn",class:{'color-red':true,fr:true},label:"删除",click:this.delAll},
        {type:"checked",class:{fr:true},value:false,label:"全选",click:this.chooseAll},
      ],

      data:[{},{}],

      pageInfo:{
        page:1,
        total:0,
        pageSize:10
      },
      search:{}
    };
  },
  methods: {
    getListData(){
      let sta = this.tabsData.findIndex(val=>val.isActive)
      this.pageInfo.page=1
      var params={sta,page:this.pageInfo.page}
      this.getList(params)
    },
    getList(params){
      _g.apiPost('message/lists',params).then(res=>{
        res.data.forEach(ele => {
            ele.checked=false
        });
        this.data=res.data
      })
    },

    pageChange(){
      let sta = this.tabsData.findIndex(val=>val.isActive)
      this.pageInfo.page++
      var params={sta,page:this.pageInfo.page}
      this.getList(params)
    },

    chooseAll(item){
      this.data.forEach(ele=>{
        ele.checked=item.value
      })
    },

    delAll(){
      let id=this.data.map(val=>val.checked?val.id:false).join(",").replace(/false,|false/g,"")
      if(id===""){
        _g.toastMsg("warning","至少选中一个")
        return
      }
      _g.apiPost("message/del",{id}).then(res=>{
        _g.toastMsg(res.code?"error":"success",res.msg)
        if(!res.code){
          this.getListData()
          this.$set(this.btnsData[2],"value",false)
        }
      })
    },
    readAll(){
      let id=this.data.map(val=>val.checked?val.id:false).join(",").replace(/false,|false/g,"")
      if(id===""){
        _g.toastMsg("warning","至少选中一个")
        return
      }
      _g.apiPost("message/save",{id}).then(res=>{
        _g.toastMsg(res.code?"error":"success",res.msg)
        if(!res.code){
          this.getListData()
          this.$set(this.btnsData[2],"value",false)
        }
        
      })
    }
  },
  created() {
    this.getListData()
  }
};
</script>
<style scoped>
.message {
}
.pagination{
  text-align: center;
  margin-bottom: 10px;
}
</style>